<template>
    <div>
        <ul class="list">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    loading-text="加载中"
                    :immediate-check="false"
                    @load="onLoad"
            >
                <li v-for="(item, index) in mylist" @click="pay(item)">
                    <div class="line01">
                        <div class="time">{{item.createtime}}</div>
                        <div class="line01_r">
                            <span>{{item.memo}}</span>
                        </div>
                    </div>
                    <div class="line02">
                        <div class="txt">支付方式：{{item.payway}}</div>
                        <div class="line02_r">
                            <span v-if="item.status==1">已支付{{item.money}}</span>
                            <span v-else>待支付￥{{item.money}}</span>
                            <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                        </div>
                    </div>
                </li>
            </van-list>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                loading: false,
                finished: false,
                page:1,
                mylist:[]
            }
        },
        mounted(){
            this.getList();
        },
        methods:{
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.getList();
            },
            getList(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "/api/user.index/rechargeLog",
                    params: {page:that.page},
                    success: function (res) {
                        if (res.data.code == 1) {
                            var ress=res.data.data.data;
                            if (ress.length < 1 || ress == null ) {
                                // 加载结束
                                that.finished = true;
                                return;
                            }else {
                                that.mylist.push.apply(that.mylist,ress)
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            pay(item){
                if(item.status < 1){
                    var that = this;
                    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                    if(item.paytype == 1){
                        var paymethod = 1;
                        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                            //微信浏览器打开
                            paymethod=1;
                        }else {
                            //h5打开
                            paymethod=2;
                        }
                        //微信支付
                        that.request1.post1({
                            url: that.Url + "api/order/topayRecharge",
                            params: { paymethod:paymethod, id:item.id},
                            success: function (res) {
                                if (res.data.code == 1) {
                                    if(res.data.data.paytype==3){
                                        that.$toast.success("支付成功");
                                        timer = setTimeout(function () {
                                            that.balancepay=false;
                                            that.getDetail();
                                        }, 2000)
                                    }else {
                                        var ress = JSON.parse(res.data.data);
                                        if(paymethod==1){
                                            WeixinJSBridge.invoke(
                                                'getBrandWCPayRequest', {
                                                    "appId": ress.appId,     //公众号名称，由商户传入
                                                    "timeStamp": ress.timeStamp,         //时间戳，自1970年以来的秒数
                                                    "nonceStr": ress.nonceStr, //随机串
                                                    "package": ress.package,
                                                    "signType": ress.signType,         //微信签名方式：
                                                    "paySign":ress.paySign //微信签名
                                                },
                                                function (res) {
                                                    //console.log(res);
                                                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                                                        that.$toast.success("支付成功");
                                                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                                        that.$toast("支付取消");
                                                    } else {
                                                        that.$toast("支付失败");
                                                    }
                                                    timer = setTimeout(function () {
                                                        that.balancepay=false;
                                                        that.getDetail();
                                                    }, 2000)
                                                }
                                            );
                                        }else {
                                            that.$axios.post(that.Url+'api/user.index/third',{}
                                            ).then(function(res){
                                                console.log(res);
                                                if(res.data.code==1){

                                                }
                                            }).catch(function (error) {
                                                console.log(error)
                                            });
                                        }
                                    }
                                } else {
                                    alert("支付失败")
                                }
                            },
                            fail: function (error) {
                                alert("支付失败")
                            }
                        })
                    }else {
                        //支付宝支付
                        that.request1.post1({
                            url: that.Url + "api/order/topayRecharge",
                            params: {  paymethod:2, id:item.id},
                            success: function (res) {
                                if(res.data.code == 1 && res.data.data.paytype==3){
                                    that.$toast.success("支付成功");
                                    timer = setTimeout(function () {
                                        that.balancepay=false;
                                        that.getDetail();
                                    }, 2000)
                                    return false
                                }
                                if (res.status == 200) {
                                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                                        //微信浏览器打开
                                        that.alipayshow=true;
                                        const form = res.data;
                                        var local = window.location.href;
                                        location.href=local+'&forms='+encodeURI(form);
                                    }else {
                                        //h5打开
                                        const form = res.data;
                                        const div = document.createElement("div");
                                        div.id = "alipay";
                                        div.innerHTML = form;
                                        document.body.appendChild(div);
                                        document.querySelector("#alipay").children[0].submit();
                                    }
                                } else {
                                    alert(res.data.msg)
                                }
                            },
                            fail: function (error) {
//                            alert("支付失败")
                                alert(error.data.msg)
                                timer = setTimeout(function () {
                                    that.balancepay=false;
                                    that.getDetail();
                                }, 2000)
                            }
                        })
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .list li{
        background: #fff;
        padding: 14px;
        box-sizing: border-box;
        border-bottom: 1px solid #efeff4;
        font-size: 12px;
    }
    .list .line01{
        width: 100%;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
    }
    .list .line01 .time{
        color: #666;
    }
    .list .line01 .line01_r{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width:calc(100% - 160px);
    }
    .list .line01 .line01_r img{
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .list .line01 .line01_r span{
        max-width: calc(100% - 34px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .list .line02{
        margin-top:6px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .list .line02 .txt{
        width: calc(100% - 100px);
        font-size: 14px;
    }
    .list .line02 .line02_r{
        width: 98px;
        text-align: right;
    }
    .list .line02 .line02_r span{
        color: #d0a200;
    }
</style>
